<template>
  <div class="dashboard-container">
    <div class="dashboard-text">标签追溯</div>
    <!-- 添加输入框和按钮 -->
    <el-input v-model="epc" placeholder="请输入EPC" style="width: 200px; margin-bottom: 10px;"></el-input>
    <el-button @click="fetchProductInfo" style="margin-left: 10px">查询</el-button>
    <!-- 添加对话框 -->
    <el-dialog title="产品详细信息" :visible.sync="dialogVisible" width="50%">
      <div v-if="productInfo">
        <p>产品名称: {{ productInfo.productName }}</p>
        <p>产品颜色: {{ productInfo.productColor }}</p>
        <p>名称: {{ productInfo.name }}</p>
        <p>产品尺寸: {{ productInfo.productSize }}</p>
        <p>基础价格: {{ productInfo.productBasicPrice }}</p>
        <p>销售价格: {{ productInfo.productSalePrice }}</p>
        <h3>EPC 流水日志</h3>
        <ul>
          <li v-for="(log, index) in epcFlowLogs" :key="index">
            操作时间: {{ log.operationTime }}, 存储类型: {{ log.storageType }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加图表 -->
    <div ref="monthlyRankChart" style="width: 100%; height: 400px;"></div>
    <!-- 新增日流量图表 -->
    <div ref="dayFlowChart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { epcFlowLog, monthlyRank, dayFlow } from '@/api/storage'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      epc: '',
      dialogVisible: false,
      productInfo: null,
      epcFlowLogs: [],
      monthlyRankData: [], // 新增月度排名数据
      dayFlowData: [], // 新增日流量数据
      monthlyRankChart: null,
      dayFlowChart: null
    }
  },
  created() {
    this.fetchMonthlyRank() // 组件创建时获取月度排名数据
    this.fetchDayFlow() // 组件创建时获取日流量数据
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    fetchProductInfo() {
      // 这里假设有一个API调用，根据EPC获取产品信息
      // 示例代码，实际需要根据实际情况替换
      epcFlowLog(this.epc)
        .then(response => {
          this.productInfo = response.data.productInfo;
          this.epcFlowLogs = response.data.epcFlowLogs;
          this.dialogVisible = true;
        })
    },
    fetchMonthlyRank() {
      monthlyRank()
        .then(response => {
          this.monthlyRankData = response.data.map(item => ({
            productName: item.productName,
            productCode: item.productCode,
            outboundQuantity: item.outboundQuantity
          }));
          this.updateMonthlyRankChart()
        })
    },
    fetchDayFlow() {
      dayFlow()
        .then(response => {
          this.dayFlowData = response.data.map(item => ({
            date: item.date,
            quantity: item.quantity
          }));
          this.updateDayFlowChart()
        })
    },
    initCharts() {
      this.monthlyRankChart = echarts.init(this.$refs.monthlyRankChart)
      this.dayFlowChart = echarts.init(this.$refs.dayFlowChart)
    },
    updateMonthlyRankChart() {
      if (this.monthlyRankChart) {
        const option = {
          title: {
            text: '月度排名'
          },
          tooltip: {},
          legend: {
            data: ['出库数量']
          },
          xAxis: {
            data: this.monthlyRankData.map(item => item.productName)
          },
          yAxis: {},
          series: [{
            name: '出库数量',
            type: 'bar',
            data: this.monthlyRankData.map(item => item.outboundQuantity)
          }]
        }
        this.monthlyRankChart.setOption(option)
      }
    },
    updateDayFlowChart() {
      if (this.dayFlowChart) {
        const option = {
          title: {
            text: '日流量'
          },
          tooltip: {},
          legend: {
            data: ['流量']
          },
          xAxis: {
            data: this.dayFlowData.map(item => item.date)
          },
          yAxis: {},
          series: [{
            name: '流量',
            type: 'line',
            data: this.dayFlowData.map(item => item.quantity)
          }]
        }
        this.dayFlowChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>